<template>
  <div class="home">
    <div class="col-md-8 home-main">

      <div class="clearfix main-top"> 
        <router-link class="btn publish btn-sm pull-right" to="/publishArticle" tag="button">
          发表文章 <span class="glyphicon glyphicon-pencil"></span>
        </router-link>
        <p class="pull-left main-title"><span class="glyphicon glyphicon-th-list"></span>文章列表</p>
      </div>

      <ul class="list-group" >
        <li v-for="article in articles" class="clearfix list-group-item">
          <h4 class="clearfix">
            <router-link :to="'/article/' + article._id" :class="{'better-icon': article.better}" > 
              {{article.title}} 
            </router-link>
          </h4>
          <div class="article-intro">摘要: {{article.intro}} </div>
          <div class="article-tags clearfix">
            <span class="pull-left"> 
              <span class="glyphicon glyphicon-time"></span>
               {{article.time | date}}
               <span> -- {{article.autor}} </span>
            </span>
            <div class="article-type pull-right">[{{article.type | articleType}}]</div>
          </div>
        </li>
      </ul>
      <div class="home-pageTab clearfix">
        <span class="pull-right" v-show="page_id !== pages" @click="pageTab(page_id + 1)">下一页</span>
        <span class="pull-right"  v-show="page_id !== 1" @click="pageTab(page_id - 1)">上一页</span>
      </div>
    </div>
    
    <div class="col-md-4  home-side">
      <!--精品文章-->
      <div class="betterArticles">
        <div class="title clearfix">
          精品推荐
          <!-- <router-link class="pull-right" to="/articleList/better">more>></router-link> -->
        </div>
        <ul class="betterArticles-list">
          <li v-for="(item, index) in betterArticles">
            <router-link :to="'/article/'+ item._id">
              <div :class="['shuozs', 'bgcolor' + (index+1)]">
                {{item.time | date('short') }}
              </div>
              <p>{{item.title}}</p>
              <p>摘要: {{item.intro}}</p>
            </router-link>
          </li>
        </ul>
      </div>
      <!--热门排行-->
      <div class="ranking">
        <div class="title">
          热门排行
          <!-- <router-link class="pull-right" to="/articleList/hot">more>></router-link> -->
        </div>
        <ul class="ranking-list">
          <li v-for="(item, index) in rankingArticles" >
            <router-link :to="'/article/'+ item._id">
              {{item.title}}
            </router-link>
          </li>
        </ul>
      </div>
      <!--新用户注册-->
      <div class="newUser clearfix">
        <div class="title">工坊新人</div>
        <ul class="newUser-list">
          <li v-for="item in newUsers">
            <router-link :to="'/userCenter/' + item._id">{{item.user}} </router-link>
          </li>
          
        </ul>
      </div>
      <!--工坊大神榜-->
      <div class="greatUser">
        <div class="title">工坊积分榜</div>
        <ul class="greatUser-list">
          <li v-for="(item, index) in greatUsers" :class="'clearfix tagsbg tagsbg'+ (index+1)">
            <router-link :to="'/userCenter/' + item._id " class="greateUser-list-user">
              <span :class="index+1">{{index+1}}</span> {{item.user}} ({{item.integral}} )
            </router-link>
            <div class="pull-right">
              <button v-show="(userInfo && userInfo.user) !== item.user" class="btn careBtn" @click="careUser(index)"> 
                <i class="glyphicon glyphicon-plus"></i> 关注
              </button>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="chat">
      
    </div>
  </div>
</template>

<style type="text/css">

  .home .home-main {
    min-height: 580px;
    overflow: hidden;
    position: relative;
  }
  .home .main-top {
    font-size: 16px;
    padding: 10px 0;
    border-bottom: 1px solid #d8dfea;
  }
  .home .main-title .glyphicon {
    color: #F09731;
    margin-right: 5px;
  }

  .home .main-title {
    line-height: 30px;
    vertical-align: bottom;
  }
  
  .home .publish {
    background: #fff;
    border: 1px solid #d8dfea;
  }

  /*分页*/
  .home-main .home-pageTab {
    position: absolute;
    width: 100%;
    padding: 0 30px;
    bottom: 0px;
  }
  .home-main .home-pageTab span {
    cursor: pointer;
    color: #04f;
  }
  
  /*列表*/
  .home .list-group .list-group-item{
    border: none;
    border-bottom: 1px dotted #ddd;
    margin-bottom: 0;
    padding: 15px 0;
  }
  .home .list-group .list-group-item:last-child{
    border-bottom: none;
  }
  .home .article-type {
    font-size: 12px;
    color: #e03c02;
  }
  .home .better-icon {
    padding-left: 24px;
    background: url(../assets/better.png) no-repeat left center;
  }
  .home .article-intro {
    padding: 10px 0;
    color: #666;
    font-size: 12px;
  }
  .home .article-tags span{
    color: #999;
  }

  /*home-side*/
  .home .home-side {
    padding-left: 20px;
  }
  
  .betterArticles,.ranking,.newUser,.greatUser{
    margin-bottom: 20px;
  }
  /*精品推荐*/
  .betterArticles-list li{
    height: 40px;
    margin-bottom: 10px;
    overflow: hidden;
    line-height: 20px;
  }
  .betterArticles-list li p {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
  }
  .shuozs {
    float: left;
    margin-right: 10px;
    padding: 10px 5px;
    color: #FFF;
    text-align: center;
    font-size: 14px;
    border-radius: 5px;
  }
  .bgcolor1 {
      background: #9C3;
  }
  .bgcolor2 {
      background: #ff8151;
  }
  .bgcolor3 {
      background: #66cc9a;
  }
  .bgcolor4 {
      background: #f60;
  }
  .bgcolor5 {
      background: #9C3;
  }

  
  .title{
    font-size: 16px;
    margin-bottom: 10px;
    padding-left: 20px;
    background: url(../assets/ok.png) no-repeat left center;
  }
  
  /*热门排行*/
  .ranking-list li{
    padding: 5px 5px 5px 20px;
    border-bottom: 1px dotted #ddd;
    background: url(../assets/fire.png) no-repeat left center;
  }
  .ranking-list li a {
    display: inline-block;
    width: 100%;
    height: 24px;
    line-height: 24px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /*工坊新人区*/
  .newUser-list li {
    float: left;
    margin: 2px;
  }
  .newUser-list li a{
    display: block;
    padding: 8px 12px;
    color: #fff;
    border-radius: 5px;
  }
  .newUser-list li:nth-child(1) a{
    background: #036564;
  }
  .newUser-list li:nth-child(2) a{
    background: #f60;
  }
  .newUser-list li:nth-child(3) a{
    background: #990;
  }
  .newUser-list li:nth-child(4) a{
    background: #ff8151;
  }
  .newUser-list li:nth-child(5) a{
    background: #9C3;
  }
  .newUser-list li:nth-child(6) a{
    background: #c8c8a9;
  }
  .newUser-list li:nth-child(7) a{
    background: #3299bb;
  }
  .newUser-list li:nth-child(8) a{
    background: #fc9d9a;
  }
  .newUser-list li a:hover{
    border-radius: 0;
    color: #fff;
    text-shadow: #000 1px 1px 1px;
  }

  /*工坊大神榜*/
  .greateUser li {
    padding: 10px 5px;
  }
  .greateUser-list-user {
    display: inline-block;
    height: 34px;
    line-height: 34px;
  }
  
  .tagsbg span {
    padding: 2px 5px;
    border-radius: 5px;
    color: #FFF;
    cursor: pointer;
    font-size: 12px;
    font-weight: 0;
  }
  .tagsbg1 span{
    background: #990;
  }
  .tagsbg2 span{
    background: #f60;
  }
  .tagsbg3 span{
    background: #fe5187;
  }
  .tagsbg4 span{
    background: #9C3;
  }
  .tagsbg5 span{
    background: #ff8151;
  }


</style>


<script>
  export default {
    data () {
      return {
        page_id: 1,
        articlesNumber: 0,
        newUsers: [],
        greatUsers: [],
        articles: [],
        betterArticles: [],
        rankingArticles: []
      }
    },
    computed: {
      pages () {
        //  取整
        return Math.ceil(this.articlesNumber / 10)
      },
      userInfo () {
        return this.$store.state.userInfo
      }
    },
    mounted () {
      //  包括 文章总数、精品文章、热门排行、第一页文章， 新用户，大神
      this.$http.get(this.rootPath + '/homeData').then((res) => {
        var oRes = res.data
        this.articlesNumber = oRes.articlesNumber
        this.betterArticles = oRes.betters
        this.rankingArticles = oRes.hots
        this.articles = oRes.page1
        this.newUsers = oRes.newUsers
        this.greatUsers = oRes.greatUsers
      })
    },
    methods: {
      pageTab (page) {
        this.$http.get(this.rootPath + '/article/page?page=' + page).then((res) => {
          this.articles = res.data
          this.page_id = page
        })
      },
      //  关注他人
      careUser (index) {
        if (!this.userInfo) {
          return window.alert('请登录')
        }
        var target = this.greatUsers[index]
        this.$http.post(this.rootPath + '/updateUser/care', {handlerId: this.userInfo._id, targeterId: target._id}).then((res) => {
          if (res.data === '1') {
            window.alert('关注成功')
          } else if (res.data === '0') {
            window.alert('已经关注了')
          }
        })
      }
    },
    props: ['rootPath']

  }
</script>